<template>
    <div class="conents">
        <el-row class="row-bg" justify="center">
            <el-col :span="18">
                <el-card class="box-card" style="max-width: 480px">
                    <template #header>
                        <div class="card-header">
                            <span>会员登录</span>
                            <div style="font-size: 13px;">如果没有账户请<el-button class="btn" text style="font-size: 17px;"
                                    @click="onlogin">去注册</el-button></div>
                        </div>
                    </template>
                    <!--提交form表单-->
                    <el-form ref="formRef" style="max-width: 600px" :model="formData" :rules="rules" label-width="auto"
                        class="demo-ruleForm" status-icon>
                        <el-form-item label="手机号" prop="tel">
                            <el-input v-model="formData.tel" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formData.password" type="password" />
                        </el-form-item>

                        <el-form-item class="btnclick">
                            <el-button type="primary" @click="submitForm(formRef)">
                                登录
                            </el-button>
                            <!-- <el-button @click="resetForm(formRef)">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>
<script setup lang="ts">
//使用jwt 
import { jwtDecode } from "jwt-decode"
import { Md5 } from 'ts-md5'
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
import { UserApi } from '@/api'
import { useRouter } from 'vue-router'
const router = useRouter()

const formRef = ref()
const formData = reactive({
    password: '',
    tel: ''
})
// const md5pwd = Md5.hashStr("123456").toUpperCase();
// console.log("加密后的数字=",md5pwd);


const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0ZWwiOiIxMjM0KioqKjciLCJpZCI6MSwiZXhwIjoxNzI4ODc0MDAwOTYzfQ.RNXhE4A7Ny7055SEcVEvVjIJJ6HcGb8io3auPXIIpQo"
const code = jwtDecode(token)
//console.log(code);

//正则验证
const rules = reactive({
    tel: [
        { required: true, message: '手机号必填', trigger: 'blur' },
        { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/, message: '必须输入正确手机号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码必填', trigger: 'blur' },
        { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间', trigger: 'blur' },
    ]
})

const formSubmit = () => {
    let tel = formData.tel
    console.log(tel);

    const md5pwd = Md5.hashStr(formData.password).toUpperCase();
    UserApi.login.call({ tel, password: md5pwd }).then((res: any) => {
        console.log(res);
        const code = jwtDecode(res)
        console.log(code);
        ElMessage.success("登录成功")
        router.push({ name: 'home' })
    })

}

const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            formSubmit()
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}


const onlogin = () => {
    router.push({ name: 'user-register' })
}

</script>